<template>
  <div class="box" ref="target">目标元素</div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export default {
  setup() {
    const target = ref(null)

    // 用于检测元素可见性的函数 - 结构从文档中CV即可
    const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
      // console.log(isIntersecting, '元素可见性')
      if (isIntersecting) {
        // 模拟发送请求业务
        console.log('元素可见, 发送网络请求~~~~~')
        // 请求发送后，停止检查
        stop()
      }
    })

    return { target }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: plum;
  margin: 1000px auto;
}
</style>
